<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>添加用户</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../css/oksub.css">
	<link rel="stylesheet" href="../../libme/modules/formselects/formSelects-v4.css">
	<script type="text/javascript" src="../../lib/loading/okLoading.js"></script>
	<style type="text/css">
		/* 修改验证表单异常时提示颜色 */
		/*.layui-layer-tips .layui-layer-content {*/
			/*background-color: rgb(80, 80, 80) !important;*/
			/*color: #30ff00 !important;*/
		/*}*/
		/*.layui-layer-tips i.layui-layer-TipsB, .layui-layer-tips i.layui-layer-TipsT {*/
			/*border-right-color: rgb(80, 80, 80)!important;*/
		/*}*/
	</style>
</head>
<body>
<div class="ok-body">
	<!--form表单-->
	<!--<form class="layui-form layui-form-pane ok-form">-->
	<form class="layui-form ok-form" lay-filter="sysuser-add">
		<div class="layui-form-item">
			<label class="layui-form-label">登录账户</label>
			<div class="layui-input-block">
				<input type="text" name="username" placeholder="登录用户账号" autocomplete="off" class="layui-input" lay-verify="required|username" lay-verType="tips" id="username">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">用户昵称</label>
			<div class="layui-input-block">
				<input type="text" name="nickname" placeholder="用户昵称" autocomplete="off" class="layui-input" lay-verify="required" lay-verType="tips" id="nickname">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">手机号码</label>
			<div class="layui-input-block">
				<input type="text" name="mobile" placeholder="联系方式" autocomplete="off" class="layui-input" lay-verify="required|phone" lay-verType="tips" id="mobile">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">账户类型</label>
			<div class="layui-input-block">
				<input type="radio" name="userType" value="00" title="系统用户" lay-filter="userType" checked>
				<input type="radio" name="userType" value="10" title="内部用户" lay-filter="userType">
				<input type="radio" name="userType" value="20" title="注册用户" lay-filter="userType">
			</div>
		</div>


		<div class="layui-form-item">
			<label class="layui-form-label">所属部门</label>
			<div class="layui-input-block">
				<select name="deptId" xm-select="dept" xm-select-search="" xm-select-max="1" lay-filter="dept">
				</select>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">备注</label>
			<div class="layui-input-block">
				<input type="text" name="remark" placeholder="用户什么也没有留下" autocomplete="off" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script src="../../libme/pages/body.js"></script>
<script type="text/javascript">
	layui.use(["element", "form", "tree", "okLayer", "okUtils", "jquery","okMock","api","formSelects"], function () {
		let form = layui.form;
		let okLayer = layui.okLayer;
        let okMock = layui.okMock;
        let $ = layui.jquery;
        let api = layui.api;
        let formSelects = layui.formSelects;
		okLoading.close();

		// tree.render({
        // 	elem: "#permissionTree",
        // 	//data: okMock.api.permission.list,
        // 	data: data,//从本地 localStorage 中取值
        // 	showCheckbox: true
        // });

		form.verify({
            username: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[a-zA-Z0-9_]+$").test(value)){
                    return '用户名不能有特殊字符';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '用户名不能全为数字';
                }
                if(!new RegExp("^[a-zA-Z0-9_]{4,24}$").test(value)){
                    return '用户名长度必须为4-24个字符';
                }
            }
		})
        form.on("submit(add)", function (data) {
			// TODO 权限节点校验
			api.request({
				url:okMock.api.user.create,
				where: data.field,
				dataType: api.jsonType.ujson
			},function (resp, stat) {
                okLayer.greenTickMsg("添加成功", function () {
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                });
            })
			return false;
		});

		// 下拉框
        formSelects.config('dept', {
            type: 'post',                //请求方式: post, get, put, delete...
            header: {},                 //自定义请求头
            data: {},                   //自定义除搜索内容外的其他数据
            //searchUrl: '/ajax/admin/sysDept/findSelectBoxList',              //搜索地址, 默认使用xm-select-search的值, 此参数优先级高
            //searchName: 'keyword',      //自定义搜索内容的key值
            //searchVal: '',              //自定义搜索内容, 搜素一次后失效, 优先级高于搜索框中的值
            keyName: 'deptName',            //自定义返回数据中name的key, 默认 name
            keyVal: 'deptId',            //自定义返回数据中value的key, 默认 value
            //keySel: 'selected',         //自定义返回数据中selected的key, 默认 selected
            //keyDis: 'disabled',         //自定义返回数据中disabled的key, 默认 disabled
            keyChildren: 'children',    //联动多选自定义children
            delay: 500,                 //搜索延迟时间, 默认停止输入500ms后开始搜索
            direction: 'auto',          //多选下拉方向, auto|up|down
            response: {
                statusCode: 100,          //成功状态码
                statusName: 'code',     //code key
                msgName: 'name',         //msg key
            },
			tree: {
				//在点击节点的时候, 如果没有子级数据, 会触发此事件(创建新的子级节点)
				nextClick: function(id, item, callback){
					//需要在callback中给定一个数组结构, 用来展示子级数据
					// callback([
					//     {name: 'test1', value: Math.random()},//节点1
					//     {name: 'test2', value: Math.random()}//节点2
					// ])
				},
			},
			beforeSuccess: function(id, url, searchVal, result){
				//我要把数据外层的code, msg, data去掉
				result = result.extend.data;
				//然后返回数据
				return result;
			},
			success: function (id, url, searchVal, result) {

            }
        }).data('dept', 'server', {
            url: okMock.api.dept.selectBoxList,
        });
        //在多选第一次打开的时候收缩所有的子节点, 收缩全部节点
        var isFirst = true;
        formSelects.opened('dept', function(id){
            if(isFirst){
                isFirst = false;
                $('[fs_id="dept"]').find('.xm-cz i.icon-caidan').click();
            }
        });

        form.render('select','dept');





        $(function () {//页面加载
			$('input[name="username"]').blur(function () {
			    var ele = "#username";
                var that = $(this)
				//layer.msg($(this).val())
				var val =  $(this).val().trim();
				if(val == '' || val.length <=0 || val == undefined) {
					api.tips('用户名不能为空','#username','d');
					that.focus();
					return false;
                }
                if(!new RegExp("^[a-zA-Z0-9_]{4,24}$").test(val)) {
                    api.tips('用户名长度必须为4-24个字符',ele,'d');
                    that.focus();
                    return false;
                }
                if(!new RegExp("^[a-zA-Z0-9_]+$").test(val)) {
                    api.tips('用户名不能有特殊字符',ele,'d');
                    that.focus();
                    return false;
                }

                $.ajax({
                    url: okMock.api.user.checkUsernameExist,
                    dataType: api.jsonType.text,
                    data: {username: val},
					//sync: false,
                    success: function (resp, stat) {
                        console.log(resp)
                        if(resp=='true') {
                            //layer.msg("用户名已存在")
                            api.tips('用户名已经存在，请换一个用户名',ele,'d')
                            that.focus()
                        }
                    }
                })
				return false
            })
			$('input[name="mobile"]').blur(function () {
				var m = $(this).val().trim();
				if(!/(^$)|^1\d{10}$/.test(m)){
                    api.tips('请输入正确的手机号',ele,'d');
                    this.focus();
				}
            });

            formSelects.value('dept', [0]);
        })
	})
</script>
</body>
</html>
